<template>
  <!-- 与树节点显示一致的组件 -->
  <div class="v-editor-models-right-dropdown-node-label g-jc-sb">
    <div class="g-flex-1 _list_scroll">
      <div
        v-for="(item, index) of valueData"
        :key="index"
        :class="{ _selected: selected && selectedModelId === item.id }"
        class="g-pd-l-8 g-one-line"
        @contextmenu="propertyModelContextMenu($event, item)"
      >
        <span>
          <img
            :src="item.icon"
            style="margin-right: 4px; width: 16px; height: 16px; object-fit: contain"
          />
          <NodeLabel
            :nodeData="item"
            :selected="false"
            :disabled="false"
            :show-new="false"
            :encrypted="encrypted"
          />
        </span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PropertyRow } from "../../types";
import { ref, watch } from "vue";
import NodeLabel from "@/modules/model/comps/station/sider/modelTree/modelTree/NodeLabel.vue";
import { NodeData } from "@/modules/model/project/IGraphNode";
import { propertyModelContextMenu } from "../propertyUtil";

const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
  encrypted?: boolean;
}>();

const valueData = ref<NodeData[]>([]);

watch(
  () => props.row,
  async () => {
    let rowValue: NodeData[] = [];
    if (props.row.value && Array.isArray(props.row.value)) {
      rowValue = props.row.value as NodeData[];
    } else if (props.row.value instanceof Object) {
      rowValue = [props.row.value] as NodeData[];
    }

    valueData.value = rowValue;
  },
  { immediate: true }
);

const selectedModelId = ref("");

watch(
  () => props.selected,
  val => {
    if (val === false) {
      selectedModelId.value = "";
    }
  }
);
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-editor-models-right-dropdown-node-label {
  ._selected {
    background-color: $theme-color;
    color: #fff;
    ._name-label {
      color: #fff;
    }
  }
  ._list_scroll {
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
  }
  ._disable {
    cursor: not-allowed;
    color: #c1c5cb;
    filter: grayscale(100);
  }
}
</style>
